<template>
  <view class="container">
    <!-- 头部 -->
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="错题集 " :background="background">
    </u-navbar>
    <!-- body -->
    <view>
      <view class="container_header">
        <view v-for=" item in personPaperList">
          <view class="u-today">
            <view class="u-today-card">
              试题名称：{{item.name}}
            </view>
          </view>
          <view class="u-today-header">
            <view class="u-today-text">
              题目数：{{item.questionCount}}
            </view>
            <view class="u-today-text">
              上传时间：{{item.createTime}}
            </view>

          </view>
        </view>
      </view>
      <view class="container_header">



        <view class="container_header_title">
          <view class="">
            错题统计
          </view>
          <view class="" @click="resetError">
            <u-icon name="trash" color="#82B2FF" size="28"></u-icon> 清空
          </view>
        </view>
        <view class="container_header_search">
          <view class="">
            答对后自动移除错题
          </view>
          <view class="">
            <u-switch active-color="#82B2FF" @change="change" v-model="checked"></u-switch>
          </view>

        </view>
      </view>

      <view class="container_card">
        <view class="container_card_item">
          <view class="container_card_item_text">
            错题总数
          </view>
          <view class="container_card_item_count">
            {{wrongCount}}
          </view>

        </view>
        <view class="container_card_item">
          <view class="container_card_item_text">
            今日错题
          </view>
          <view class="container_card_item_count">
            {{todayWrongCount}}
          </view>
          <view class="container_card_item_handle" @click="todayErrorList('practice')">
            查看
          </view>
        </view>
        <view class="container_card_item">
          <view class="container_card_item_text">
            错题 / 已做题
          </view>
          <view class="container_card_item_baifenbi">
            {{ wrongRate}}
          </view>
        </view>
      </view>
      <view class="container_btn">
        <u-button type="success" @click="startErrorPractice('practice')">开始练习</u-button>
      </view>
    </view>

    <u-modal :mask-close-able='true' v-model="handleError" :show-cancel-button='true' title="清空错题本全部错题"
      @confirm="confirmDelete">
      <view class="slot-content">
        <view class="container_popup_text">
          确定清空吗？
        </view>
      </view>
    </u-modal>

    <u-modal :mask-close-able="true" v-model="handlePractice" :show-cancel-button="true"
      :title=" '您上次刷题进度为' +questionCompletedCount+'/'+questionCount" confirm-text="继续刷题" cancel-text="重新开始"
      @confirm="confirmPractice('practice')" @cancel="cancelPractice('practice')">
      <view class="slot-content">
        <view class="container_popup_text">
          是否继续刷题
        </view>
      </view>
    </u-modal>

    <u-modal :mask-close-able="true" v-model="handleDelete" :show-cancel-button="true" title="将删除全部刷题记录"
      confirm-text="继续删除" cancel-text="取消" @confirm="confirmDeleteAll('practice')" @cancel="cancelDelete">
      <view class="slot-content">
        <view class="container_popup_text">
          是否继续删除
        </view>
      </view>
    </u-modal>
    <u-toast ref="uToast" />
  </view>


</template>

<script>
  import {
    startRecitePaperAPI,
    getErrorPaperAPI,
    deleteErrorPaperAPI,
    getErrorPaperAllAPI,
    getTodayErrorAPI,
    resetByIdAPI
  } from '@/api/addPaper/addpaper.js'
  export default {
    data() {
      return {
        cuoti: false,
        wrongRate: '',
        questionCompletedCount: null,
        questionCount: null,
        todayWrongCount: '',
        wrongCount: '',
        personPaperList: [],
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        handleDelete: false,
        checked: false,
        handleError: false,
        content: '清空错题本全部错题',
        showError: false,
        type: '',
        curLib: 'questionItems',
        libs: ['mh_secur_4', 'mh_secur_5'],
        examPaperId: '',
        paperType: '',
        xxx: null,
        progressRecordId: '',
        handlePractice: false,
        deletedWrong: false,
        categoryId: null,
      };
    },
    created() {},
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
      // if (option.paperType === 'person') {
      // this.paperType = 'person'
      this.examPaperId = option.id
      // } else if (option.paperType === 'public') {
      // this.paperType = 'public'
      this.categoryId = option.categoryId
      // }
    },
    async onShow() {
      await this.detailPaper()
    },
    methods: {
      backIndex() {
        uni.navigateback();
      },
      // 继续刷题
      confirmPractice(type) {
        const newSvExam = uni.getStorageSync('sv-exam') || {}
        if (!newSvExam.questionItems) {
          newSvExam.questionItems = {}
        }
        newSvExam.questionItems.practiceIndex = this.questionCompletedCount
        uni.setStorageSync('sv-exam', newSvExam)

        uni.navigateTo({
          url: '../../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type,
                questionCompletedCount: this.questionCompletedCount,
                questionBankType: this.questionBankType,
                id: this.examPaperId,
                progressRecordId: this.progressRecordId,
                deletedWrong: this.deletedWrong,
                categoryId: this.categoryId,
                examPaperId: this.examPaperId
              },
              apifunc: {
                examList: this.xxx
              }
            })
          }
        })

      },
      //确定重新刷题
      async confirmDeleteAll(type) {
        const param = {
          id: this.examPaperId,
          categoryId: this.categoryId,
          questionBankType: this.questionBankType,
          questionIds: ''
        }
        await resetByIdAPI(param).then(async () => {
          this.examList = await this.getExamList();
        })

      },
      // 重新刷题
      async cancelPractice(type) {
        const param = this.progressRecordId
        // await deleteRecitePaperAPI(param).then((res) => {
        this.questionCompletedCount = 0
        const newSvExam = uni.getStorageSync('sv-exam') || {}
        if (!newSvExam.questionItems) {
          newSvExam.questionItems = {}
        }
        newSvExam.questionItems.practiceIndex = this.questionCompletedCount
        uni.setStorageSync('sv-exam', newSvExam)

        this.handleDelete = true



      },
      //查看今日错题
      async todayErrorList(type) {
        this.cuoti = true
        this.questionBankType = 9
        const param = {
          examPaperId: this.examPaperId
        }
        this.examList = await this.getTodayErrorAPIList();
      },
      //清空所有错题
      async confirmDelete() {
        await deleteErrorPaperAPI(this.examPaperId).then(() => {
          this.$refs.uToast.show({
            title: '清除所有错题成功',
            type: 'success',
          })
          this.detailPaper()
        }).catch(() => {})

      },
      // 我的错题
      async detailPaper() {
        await getErrorPaperAPI(this.examPaperId).then((res) => {
          this.personPaperList = [res.data.examPaperDetail]
          this.wrongCount = res.data.wrongCount
          this.todayWrongCount = res.data.todayWrongCount
          this.wrongRate = res.data.wrongRate
        }).catch(() => {})
      },
      //开始练习
      async startErrorPractice(type) {
        this.questionBankType = 10
        this.cuoti = false
        this.examList = await this.getExamList();
      },
      change(status) {
        this.deletedWrong = status
        if (status) {
          this.$refs.uToast.show({
            title: '开启清除成功',
            type: 'success',
          })

        } else {
          this.$refs.uToast.show({
            title: '开启关闭成功',
            type: 'success',
          })
        }
      },
      resetError() {
        this.handleError = true
      },
      //获取进度
      async getProsess() {
        const p = {
          id: this.progressRecordId
        }
        await startRecitePaperAPI(p).then((r) => {
          this.questionCompletedCount = r.data.questionCompletedCount
          this.questionCount = r.data.questionCount
        })
      },
      getTodayErrorAPIList() {
        return new Promise((resolve, reject) => {
          // if (this.paperType === 'public') {
          const param = {
            examPaperId: this.examPaperId,
          }
          getTodayErrorAPI(param).then((res) => {
            resolve(res.data)
            this.xxx = res.data
            if (res.data?.paperPartItems === null) {
              this.$refs.uToast.show({
                title: '暂无错题',
                type: 'success',
              })
              return
            }
            if (this.xxx.progressRecordId) {
              this.progressRecordId = res.data.progressRecordId
              this.getProsess()
              this.handlePractice = true
            } else {
              const newSvExam = uni.getStorageSync('sv-exam') || {}
              if (!newSvExam.questionItems) {
                newSvExam.questionItems = {}
              }
              newSvExam.questionItems.practiceIndex = 0
              uni.setStorageSync('sv-exam', newSvExam)
              uni.navigateTo({
                url: '../../../uni_modules/sv-exam-plus/pages/exam/exam',
                success: (res) => {
                  res.eventChannel.emit('e-transmit-exams', {
                    param: {
                      from_lib: this.curLib,
                      unit: 'unit-1'
                    },
                    opt: {
                      lib_name: this.curLib,
                      type: 'practice',
                      questionBankType: 9,
                      id: this.examPaperId,
                      progressRecordId: this.progressRecordId,
                      categoryId: this.categoryId,
                      examPaperId: this.examPaperId
                    },
                    apifunc: {
                      examList: this.xxx
                    }
                  })
                }
              })
            }

          })


        })
      },
      getExamList() {
        return new Promise((resolve, reject) => {
          // if (this.paperType === 'public') {
          const param = {
            examPaperId: this.examPaperId,
          }
          const api = this.cuoti ? getTodayErrorAPI : getErrorPaperAllAPI
          api(param).then((res) => {
            resolve(res.data)
            this.xxx = res.data
            if (res.data?.paperPartItems === null) {
              this.$refs.uToast.show({
                title: '暂无错题',
                type: 'success',
              })
              return
            }
            if (this.xxx.progressRecordId) {
              this.progressRecordId = res.data.progressRecordId
              this.getProsess()
              this.handlePractice = true
            } else {
              const newSvExam = uni.getStorageSync('sv-exam') || {}
              if (!newSvExam.questionItems) {
                newSvExam.questionItems = {}
              }
              newSvExam.questionItems.practiceIndex = 0
              uni.setStorageSync('sv-exam', newSvExam)
              uni.navigateTo({
                url: '../../../uni_modules/sv-exam-plus/pages/exam/exam',
                success: (res) => {
                  res.eventChannel.emit('e-transmit-exams', {
                    param: {
                      from_lib: this.curLib,
                      unit: 'unit-1'
                    },
                    opt: {
                      lib_name: this.curLib,
                      type: 'practice',
                      questionBankType: this.questionBankType,
                      id: this.examPaperId,
                      progressRecordId: this.progressRecordId,
                      deletedWrong: this.deletedWrong,
                      categoryId: this.categoryId,
                      examPaperId: this.examPaperId
                    },
                    apifunc: {
                      examList: this.xxx
                    }
                  })
                }
              })
            }

          })


        })
      },
    }
  }
</script>

<style lang="scss">
  .container {
    height: 100vh;
    background-color: aliceblue;

    .container_header {
      background-color: #fff;
      padding: 20rpx;
      margin: 20rpx;
      border-radius: 20rpx;

      .container_header_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .container_header_search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30rpx;
      }

      .u-today {
        display: flex;
        justify-content: space-between;
        // padding: 0 25rpx;
        color: #333;
      }

      .u-today-header {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;

        .u-today-text {
          // padding: 10rpx 25rpx;
          font-size: 25rpx;
          color: #333;
        }
      }
    }

    .container_popup_text {
      text-align: center;
      margin: 30rpx 0;
    }

    .container_card {
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .container_card_item {
        width: 30%;
        height: 180rpx;
        border-radius: 20rpx;
        background-color: #fff;

        .container_card_item_text {
          margin-top: 20rpx;
          text-align: center;
          font-weight: 700;
        }

        .container_card_item_count {
          margin-top: 10rpx;
          text-align: center;
        }

        .container_card_item_handle {
          margin-top: 10rpx;
          text-align: center;
          color: #82B2FF;
        }

        .container_card_item_baifenbi {
          margin-top: 10rpx;
          text-align: center;
          color: red;

        }
      }
    }

    .container_btn {
      margin: auto;
      margin-top: 100rpx;
      width: 50%;
    }

  }
</style>